<template>
    <nav class="bottom-nav">
        <a :class="{'on': this.$route.params.cid == nav.i}" v-for="nav in navs" v-link="{name: 'channel', params: {id: nav.i}}">{{nav.n}}</a>
    </nav>
</template>

<script>
import store from './../../store'

export default {
    name: 'bottomNav',
    data () {
        return {
            navs: store.navConfig.channels
        }
    }
}
</script>

<style>
    .bottom-nav{
        display: -webkit-box;
        display: flex;
        height: 48px;
        line-height: 48px;
        text-align: center;
        background-color: #fff;
    }

    .bottom-nav a{
        display: block;
        -webkit-box-flex: 1;
        flex: 1;
        font-size: 14px;
        color: #151515;
    }

    .bottom-nav .on{
        color: #ffb400;
    }
</style>